<template>
  <div class="goal-audit-container">
    <div class="audit-header">
      <h3>课程目标考核合理性审核表</h3>
      <el-button 
        type="primary" 
        size="small" 
        @click="copyAuditTable"
        :icon="CopyDocument"
      >
        复制表格
      </el-button>
    </div>
    
    <div class="table-wrapper" ref="auditTableRef">
      <table class="audit-table">
        <!-- 前7行：考核基本信息 -->
        <tbody>
          <!-- 第1行 -->
          <tr>
            <td rowspan="7" class="basic-info-cell">考核基本信息</td>
            <td class="label-cell">学期</td>
            <td class="value-cell">{{ courseInfo.semester }}</td>
            <td class="label-cell">适用年级/专业/班级</td>
            <td class="value-cell" colspan="2">{{ courseInfo.grade }}级{{ courseInfo.applicableMajor }}{{ courseInfo.className }}</td>
          </tr>
          
          <!-- 第2行 -->
          <tr>
            <td class="label-cell">课程代码</td>
            <td class="value-cell">{{ courseInfo.courseCode }}</td>
            <td class="label-cell">课程名称</td>
            <td class="value-cell" colspan="2">{{ courseInfo.courseName }}</td>
          </tr>
          
          <!-- 第3行 -->
          <tr>
            <td class="label-cell">授课教师</td>
            <td colspan="4" class="value-cell"></td>
          </tr>
          
          <!-- 第4行 -->
          <tr>
            <td class="label-cell">所在学院</td>
            <td colspan="4" class="value-cell"></td>
          </tr>
          
          <!-- 第5行 -->
          <tr>
            <td rowspan="2" class="label-cell">考核方式及组织形式</td>
            <td colspan="4" class="value-cell">{{ evaluationMethodNames }}</td>
          </tr>
          
          <!-- 第6行 -->
          <tr>
            <td colspan="4" class="value-cell">期末考试采用</td>
          </tr>
          
          <!-- 第7行 -->
          <tr>
            <td class="label-cell">成绩构成</td>
            <td colspan="4" class="value-cell">{{ totalEvaluationFormula }}</td>
          </tr>
        </tbody>
        
        <!-- 课程目标情况部分 -->
        <tbody>
          <!-- 表头行 -->
          <tr class="goal-header-row">
            <td class="goal-analysis-cell" :rowspan="goalRelations.length + 1">考核方式、考核内容与课程目标对应分析</td>
            <th class="header-cell">课程目标</th>
            <th class="header-cell">支撑毕业要求</th>
            <th class="header-cell">评价方式</th>
            <th class="header-cell">课程分目标达成值</th>
            <th class="header-cell">是否达成</th>
          </tr>
          
          <!-- 课程目标数据行 -->
          <tr v-for="(goal, index) in goalRelations" :key="index" class="goal-data-row">
            <td class="goal-cell">{{ goal.courseGoal }}</td>
            <td class="requirement-cell">
              <div v-for="(point, pointIndex) in goal.graduationRequirementPoints" :key="point.id" class="audit-point-item">
                <div class="point-main">{{ point.graduationRequirementNumber }}.{{ point.graduationRequirementPointNumber }}：{{ point.graduationRequirementPointDescription }}</div>
                <div class="point-support">支撑度：{{ point.supportLevel }}</div>
              </div>
            </td>
            <td class="method-cell">{{ getEvaluationMethodsForGoal(goal.number) }}</td>
            <td class="achievement-cell">{{ getGoalAchievement(goal.number) }}</td>
            <td class="status-cell">{{ getGoalStatus(goal.number) }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { CopyDocument } from '@element-plus/icons-vue'

// 定义props
const props = defineProps({
  courseInfo: {
    type: Object,
    default: () => ({})
  },
  goalRelations: {
    type: Array,
    default: () => []
  },
  evaluationMethods: {
    type: Array,
    default: () => []
  },
  goalResults: {
    type: Array,
    default: () => []
  },
  totalEvaluationFormula: {
    type: String,
    default: ''
  },
  achievementStandard: {
    type: Number,
    default: 0.6
  }
})

// 计算评价方法名称字符串
const evaluationMethodNames = computed(() => {
  return props.evaluationMethods.map(method => method.methodName).join('、')
})

// 获取指定课程目标的评价方式
const getEvaluationMethodsForGoal = (goalNumber) => {
  const methods = []
  props.evaluationMethods.forEach(method => {
    const goalWeight = method.goalWeights[goalNumber - 1] || 0
    if (goalWeight > 0) {
      methods.push(method.methodName)
    }
  })
  return methods.join('、')
}

// 获取指定课程目标的达成值
const getGoalAchievement = (goalNumber) => {
  const goalResult = props.goalResults.find(goal => goal.number === goalNumber)
  return goalResult ? goalResult.achievementValue : '0.00'
}

// 获取指定课程目标的达成状态
const getGoalStatus = (goalNumber) => {
  const achievement = parseFloat(getGoalAchievement(goalNumber))
  const status = achievement >= props.achievementStandard ? '达成' : '未达成'
  return status
}

// 复制审核表
const copyAuditTable = async () => {
  try {
    const tableElement = document.querySelector('.audit-table')
    if (!tableElement) {
      ElMessage.error('表格元素未找到')
      return
    }
    
    // 使用html2canvas将表格转换为图片
    const html2canvas = await import('html2canvas')
    const canvas = await html2canvas.default(tableElement, {
      backgroundColor: '#ffffff',
      scale: 2, // 提高图片质量
      useCORS: true
    })
    
    // 将canvas转换为blob
    canvas.toBlob(async (blob) => {
      try {
        // 创建ClipboardItem
        const clipboardItem = new ClipboardItem({
          'image/png': blob
        })
        
        // 复制到剪贴板
        await navigator.clipboard.write([clipboardItem])
        ElMessage.success('审核表已复制到剪贴板')
      } catch (err) {
        // 降级方案：下载图片
        const url = URL.createObjectURL(blob)
        const link = document.createElement('a')
        link.href = url
        link.download = '课程目标考核合理性审核表.png'
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        URL.revokeObjectURL(url)
        ElMessage.success('审核表已下载')
      }
    }, 'image/png')
    
  } catch (error) {
    console.error('复制审核表失败:', error)
    ElMessage.error('复制审核表失败，请检查html2canvas库是否正确安装')
  }
}
</script>

<style scoped>
.goal-audit-container {
  width: 100%;
}

.audit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}



.audit-header h3 {
  margin: 0;
  color: #303133;
  font-size: 18px;
  font-weight: bold;
}

.table-wrapper {
  overflow-x: auto;
}

.audit-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid black;
  font-size: 14px;
  line-height: 1.5;
}

.audit-table td,
.audit-table th {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
  vertical-align: middle;
  font-weight: normal;
  background-color: white;
}

/* 考核基本信息部分 */
.basic-info-cell {
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  width: 120px;
}

.label-cell {
  font-weight: normal;
  width: 120px;
  background-color: #f8f9fa;
}

.value-cell {
  font-weight: normal;
  min-width: 150px;
}

/* 课程目标分析部分 */
.goal-analysis-cell {
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  width: 120px;
}

.goal-header-row {
  background-color: #f8f9fa;
}

.header-cell {
  font-weight: bold !important;
  text-align: center;
  background-color: #f8f9fa;
}

.goal-data-row {
  background-color: white;
}

.goal-cell {
  font-weight: normal;
  max-width: 200px;
  word-wrap: break-word;
}

.requirement-cell {
  font-weight: normal;
  max-width: 200px;
  word-wrap: break-word;
}

.method-cell {
  font-weight: normal;
  max-width: 150px;
  word-wrap: break-word;
}

.achievement-cell {
  font-weight: normal;
  text-align: center;
  width: 100px;
}

.status-cell {
  font-weight: normal;
  text-align: center;
  width: 80px;
}

.empty-cell {
  width: 50px;
}

.audit-point-item {
  margin-bottom: 8px;
  padding: 5px 0;
  border-bottom: 1px solid #f0f0f0;
}

.audit-point-item:last-child {
  margin-bottom: 0;
  border-bottom: none;
}

.audit-point-item .point-main {
  font-weight: 500;
  color: #303133;
  margin-bottom: 3px;
}

.audit-point-item .point-support {
  font-size: 11px;
  color: #909399;
}
</style>
